<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<!-- Bootstrap core CSS -->
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8,"
	data-href="${basePath}bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
<!-- Bootstrap core JavaScript
		<!-- Placed at the end of the document so the pages load faster -->
<script src="${basePath}jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script src="${basePath}bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<!-- bootstrap-datetimepicker -->
<link
	href="${basePath}bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"	rel="stylesheet" />
<script
	src="${basePath}bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script
	src="${basePath}bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- 加载的jquery脚本 -->	
<script type="text/javascript">
    // dom加载完成时就执行该方法
	$(function() {		
		$('#datetimepicker1').datetimepicker({  
	        format: 'YYYY-MM-DD HH:mm:ss',  
	        locale: moment.locale('zh-cn')  
	    });
		// dom初始化时直接加载
		doAjaxQuery();
	});
    
    // 使用ajax获取修改数据的相关信息
    
    function doAjaxQuery() {
    	// url
    	var url = "${basePath}FriendsInfoModalModifyAjaxQueryServlet?sid=${sessionScope.sid}";
    	$.getJSON(url, function(data){
    		  console.info("JSON Data: "); 
    		  console.info(data); 
    		  // 解析数据
    		  if(data){
    			  // 将查询到的数据给控件进行赋值
    			  $("#stu_id").val(data.stu_id);
    			  $("#stu_name").val(data.stu_name);
    			  $("#stu_birthday").val(data.stu_birthday);
    			  $("#stu_address").val(data.stu_address);
    			  $("#stu_tel").val(data.stu_tel);
    			  
    			  $("option[value='"+data.stu_sex+"']").attr("selected","selected");
    			  $("option[value='"+data.stu_department+"']").attr("selected","selected");
    			  
    		  }
    		});
    }
    
</script>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-3"></div>
					<div class="col-md-6">
						<form class="form-horizontal" id="formMod"
							action="${basePath}FriendsInfoAddServlet" 
							method="post" enctype="multipart/form-data">
							<div class="form-group">
								<!-- 将主键id值传回到数据库 -->
								<input type="hidden" id="stu_id"
										name="stu_id" >
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-4">
									<!-- readonly:页面不可编辑，但是会提交form表单，该表单的值还会被传递到服务器端； 
									     disabled:页面不可编辑，但是不会提交form表单，该表单的值不会被传递给服务器端；
									     -->
									<input type="text"  class="form-control" id="stu_name"
										name="stu_name" placeholder="请输入学生姓名">
								</div>

								<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-4">
								<select class="form-control" id="stu_sex" onfocus="this.defaultIndex=this.selectedIndex;"
                                           onchange="this.selectedIndex=this.defaultIndex;"
										name="stu_sex"  >
										<option ></option>
										<option value="女"  selected="selected">女</option>
										<option value="男"  selected="selected">男</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">出生日期</label>
								<div class="col-sm-4">
									<!-- <input type="text" class="form-control" id="stuBirthday"
										name="stuBirthday" placeholder="请选择出生日期"> -->
									<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" id="stu_birthday" readonly
											name="stu_birthday" /> 
											<span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label">地址</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stu_address" readonly
										name="stu_address" placeholder="请输入地址">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">电话</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stu_tel" readonly
										name="stu_tel" placeholder="请输入电话">
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label" >系别</label>
								<div class="col-sm-4">
									<select class="form-control" id="stu_department" onfocus="this.defaultIndex=this.selectedIndex;"
                                           onchange="this.selectedIndex=this.defaultIndex;"
										name="stu_department"  >
										<option ></option>
										<option value="1"  selected="selected">计算机</option>
										<option value="2"  selected="selected">电信</option>
										<option value="3"  selected="selected">机电</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">头像</label>
								<div class="col-sm-4">
									<input type="file" class="form-control" id="stu_img" 
										name="stu_img">
								</div>

							</div>							
						</form>
					</div>
					<div class="col-md-3"></div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>